<#import "/common.ftl" as common />
<@common.commomFrame >
	<div id="breadcrumb">
		<ul class="breadcrumb">
			 <li><i class="fa fa-home"></i><a href="index-2.html">首页</a></li>
			 <li class="active">员工列表</li>
		</ul>
	</div>
	
	<div class="padding-md" >
		<div class="panel panel-default table-responsive">
			<div class="panel-body">
				<a href="#addForm" class="btn btn-info btn-xs" data-toggle="modal" ><i class="fa fa-plus fa-lg"></i> 新增</a>
			</div>
			
			<div class="panel-heading">条件搜索</div>
			<div class="panel-body">
				<form id="searchForm" class="form-inline no-margin" action="/user/list" method="post">
					<div class="form-group" style="margin-right:10px;">
						<label class="control-label">姓名</label>
						<div>
							<input name="userName" type="text" class="form-control input-sm" value="${(userModel.userName)!}"/>
						</div>
					</div>
					<div class="form-group" style="margin-right:10px;">
						<label class="control-label">角色</label>
						<div>
							<select class="form-control chzn-select" name="role" >
								<option value="">全部</option>
								<option value="1" >操作员</option>
								<option value="2" >管理员</option>
							</select>
						</div>
					</div>
					<div class="form-group" style="margin-right:10px;">
						<label class="control-label">状态</label>
						<div>
							<select class="form-control chzn-select" name="state" >
								<option value="">全部</option>
								<option value="1" >正常</option>
								<option value="2" >冻结</option>
							</select>
						</div>
					</div>
					<button type="submit" class="btn btn-sm btn-success"><i class="fa fa-search" style="font-size:16px;"></i></button>
				</form>
			</div>
			<table class="table table-bordered table-condensed table-hover table-striped" id="responsiveTable">
				<thead>
					<tr>
						<th>员工编号</th>
						<th>员工名称</th>
						<th>角色</th>
						<th>账号状态</th>
						<th>入职时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<#if userList?? && userList?size gt 0>
						<#list userList as user>
						<tr>
							<td>${user.userId}</td>
							<td>${user.userName}</td>
							<td>
								<#if (user.role)??&&user.role==1>
								<span class="label label-success">操作员</span>
								<#elseif (user.role)??&&user.role==2>
									<span class="label label-danger">管理员</span>
								</#if>
							 </td>
							<td>
								<#if (user.state)??&&user.state==1>
								<span class="label label-success">正常</span>
								<#elseif (user.state)??&&user.state==2>
									<span class="label label-danger">冻结</span>
								</#if>
							</td>
							<td><#if (user.createTime)??>${user.createTime?string('yyyy-MM-dd HH:mm')}</#if></td>
							<td>
								<a class="btn btn-xs btn-success" data-toggle="modal" href="#editForm" onclick="getUser('${user.userId}')"><i class="fa fa-wrench fa-lg"></i> 编辑</a>
								
								<#if (user.state)?? && user.state == 1>
								<button type="button" class="btn btn-xs btn-danger" onclick="lock('${user.userId}','${user.state}')"><i class="fa fa-lock fa-lg"></i> 锁定</button>
								<#elseif (user.state)?? && user.state == 2>
								<button type="button" class="btn btn-xs btn-success" onclick="lock('${user.userId}','${user.state}')"><i class="fa fa-unlock fa-lg"></i> 解锁</button>
								</#if>
							</td>
						</tr>
						</#list>
					</#if>
				</tbody>
			</table>
			<div class="panel-footer clearfix">
				<span class="label label-info pull-left">当前第 ${(userModel.pageNo)!}页  共 ${(userModel.pageTotal)!} 页  共 ${(userModel.recordTotal)!} 条记录</span>
				<ul class="pagination pagination-xs m-top-none pull-right">
					<li><a href="javascript:GoPage(1);">首页</a></li>
					<li <#if userModel.pageNo?? && (userModel.pageNo - 1) lt 1>class="disabled" </#if> ><a href="javascript:GoPage(${(userModel.pageNo) - 1});">上一页</a></li>
					<li class="active"><a href="javascript:GoPage(${(userModel.pageNo)!});">${(userModel.pageNo)!}</a></li>
					<li <#if userModel.pageNo?? && (userModel.pageNo + 1) gt userModel.pageTotal>class="disabled" </#if>><a href="javascript:GoPage(${(userModel.pageNo) + 1});">下一页</a></li>
					<li><a href="javascript:GoPage(${(userModel.pageTotal)!});">尾页</a></li>
				</ul>
			</div>
		</div>
	</div>
	
	<#-- 新增用户信息 -->
	<div class="modal fade" id="addForm">
		<div class="modal-dialog">
			<div class="modal-content">
  				<div class="modal-header">
    				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4>新增员工</h4>
  				</div>
			    <div class="modal-body">
					<form id="addUserForm" class="form-horizontal form-border" method="post" action="/user/save">
						<div class="form-group">
							<label class="col-md-2 control-label text-right">姓名</label>
							<div class="col-md-7 ">
								<input  type="text" id="userName1" name="userName"  placeholder="请输入姓名" class="form-control input-sm"/>
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-2 control-label text-right">密码</label>
							<div class="col-md-7 ">
								<input  type="text" id="password1"  name="password" placeholder="请输入密码" class="form-control input-sm"" />
							</div>
						</div>
						<div class="form-group">
							 <label class="col-md-2 control-label"><span class="text-danger">*</span>角色</label>
							<div class="col-md-10">
								<label class="label-radio inline">
									<input type="radio" name="role" value="1" required="required" 
									  data-parsley-errors-container="#roleError" checked>
									<span class="custom-radio"></span>
									操作员
								</label>
								<label class="label-radio inline">
									<input type="radio" name="role" value="2" required="required" data-parsley-errors-container="#roleError" >
									<span class="custom-radio"></span>
									管理员
								</label>
							</div>
							<span id="roleError"></span>
						</div>
						<div class="form-group text-center">
							<button type="button" class="btn btn-success" onclick="addUser()"> 保存  </button>
							<button type="button" class="btn btn-default" data-dismiss="modal"> 关闭  </button>
						</div>
					</form>
			    </div>
		  	</div>
		</div>
	</div>
	
	<#-- 编辑用户信息 -->
	<div class="modal fade" id="editForm">
  		<div class="modal-dialog">
			<div class="modal-content">
  				<div class="modal-header">
    				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4>编辑员工</h4>
  				</div>
			    <div class="modal-body">
					<form id="editUserForm" class="form-horizontal form-border" method="post" action="/user/save">
						<div class="form-group">
							<label class="col-md-2 control-label text-right">姓名</label>
							<div class="col-md-7 ">
								<input  type="text" id="userName2" name="userName"  placeholder="请输入姓名" class="form-control input-sm"/>
								<input  type="hidden" id="userId2" name="userId"/>
							</div>
						</div>
						<div class="form-group">
							<label class="col-md-2 control-label text-right">密码</label>
							<div class="col-md-7 ">
								<input  type="text" id="password2"  name="password" placeholder="请输入密码" class="form-control input-sm"" />
							</div>
						</div>
						<div class="form-group">
							 <label class="col-md-2 control-label"><span class="text-danger">*</span>角色</label>
							<div class="col-md-10">
								<label class="label-radio inline">
									<input type="radio" id="role3" name="role" value="1" required="required" />
									<span class="custom-radio"></span>
									操作员
								</label>
								<label class="label-radio inline">
									<input type="radio" id="role4" name="role" value="2" required="required" />
									<span class="custom-radio"></span>
									管理员
								</label>
							</div>
						</div>
						<div class="form-group text-center">
							<button type="button" class="btn btn-success" onclick="editUser()"> 保存  </button>
							<button type="button" class="btn btn-default" data-dismiss="modal"> 关闭  </button>
						</div>
					</form>
			    </div>
		  	</div>
		</div>
	</div>
	
	
	<script language="javascript">
	function lock(userId,state){
		$.ajax({
			cache: true,
			type: "POST",
			url:"/user/editLock",
			data:"userId=" + userId+"&state="+state,
			async: false,
			error: function(request) {
				alertify.alert("错误：服务器异常！");
			},
			success: function(data) {
				if(data.success){
					//var pageNo=$(".pagination li.active").text();
					//$.GoPage(pageNo);
					
					location.href="/user/list";
				}
				else{
					alertify.alert("错误:" + data.message);
				}
			}
		});
	}
	
	GoPage = function(pageNo){
		$("input[name = pageNo]").remove();
		$("#searchForm").append("<input type='hidden' id='searchForm_pageNo' name='pageNo' value='" + pageNo + "' />");
		$("#searchForm").submit();
	};
	
	function addUser(){
		var userName1 = $("#userName1").val();
		var password1 = $("#password1").val();
		if($.trim(userName1) == "" ){
			alertify.alert("请输入姓名！");
			return false;
		}
		if($.trim(password1) == "" ){
			alertify.alert("请输入密码！");
			return false;
		}
		
		$.ajax({
			cache: true,
			type: "POST",
			url:"/user/save",
			data:$('#addUserForm').serialize(),
			async: false,
			error: function(request) {
				alertify.alert("错误：服务器异常！");
			},
			success: function(data) {
				if(data.success){
					location.href="/user/list";
				}else{
					alertify.alert("错误:" + data.message);
				}
			}
		});
	}
	
	function getUser(userId){
		if(userId != null && userId != ""){
			$.ajax({
				cache: true,
				type: "POST",
				url:"/user/getUser",
				data:"userId=" + userId,
				async: false,
				error: function(request) {
					alertify.alert("错误：服务器异常！");
				},
				success: function(data) {
					if(data.success){
						var user = data.user;
						$("#userId2").val(user.userId);
						$("#userName2").val(user.userName);
						$("#password2").val(user.password);
						
						if(user.role == 1){
							$("#role3").prop("checked",true);
							$("#role4").prop("checked",false);
						}else{
							$("#role3").prop("checked",false);
							$("#role4").prop("checked",true);
						}
						
					}else{
						alertify.alert("错误:" + data.message);
					}
				}
			});
		}
	}
	
	function editUser(){
		var userName2 = $("#userName2").val();
		var password2 = $("#password2").val();
		if($.trim(userName2) == "" ){
			alertify.alert("请输入姓名！");
			return false;
		}
		if($.trim(password2) == "" ){
			alertify.alert("请输入密码！");
			return false;
		}
		
		$.ajax({
			cache: true,
			type: "POST",
			url:"/user/save",
			data:$('#editUserForm').serialize(),
			async: false,
			error: function(request) {
				alertify.alert("错误：服务器异常！");
			},
			success: function(data) {
				if(data.success){
					location.href="/user/list";
				}else{
					alertify.alert("错误:" + data.message);
				}
			}
		});
	}
	
	</script>
</@common.commomFrame>